import React, {Fragment} from 'react'
import PropTypes from 'prop-types'
import {Button, Col, Popconfirm, Row, Table} from 'antd'
import AnimTableBody from 'components/DataTable/AnimTableBody'
import styles from './List.less'
import classnames from 'classnames'
import AddressModal from "./AddressModal"

const List = ({
                dispatch, item, modalType, modalVisible, isMotion, location, ...tableProps
              }) => {

  const onEditClick = (record) => {
    dispatch({
      type: 'customerDetail/showAddrModal',
      payload: {
        addrModalType: 'update',
        currentAddr: record,
      },
    })
  }

  const handleDelete = (data) => {
    dispatch({
      type: 'customerDetail/delAddr',
      payload: {id: data.id},
    }).then(() => {
      handleRefresh(data)
    })
  }

  const columns = [
    {
      title: '收货人',
      dataIndex: 'receiver',
      key: 'receiver',
    }, {
      title: '收货电话',
      dataIndex: 'dmobile',
      key: 'dmobile',
    }, {
      title: '收货地址',
      dataIndex: 'address',
      key: 'address',
      render: (val, record) => record.provinceName + record.cityName + record.areaName + val,
    }, {
      title: '新增地址时间',
      dataIndex: 'ctime',
      key: 'ctime',
    }, {
      title: '操作',
      dataIndex: '',
      key: 'operation',
      render: (_, record) =>
        <Fragment>
          <Button onClick={() => onEditClick(record)} type={'primary'} size={'small'}
                  className={'margin-right'}>编辑</Button>
          <Popconfirm title="确定要删除这些数据吗?" placement="top" onConfirm={() => handleDelete(record)}>
            <Button type={'danger'} size={'small'}>删除</Button>
          </Popconfirm>
        </Fragment>,
    },
  ]

  const AnimateBody = (props) => {
    return <AnimTableBody {...props} />
  }

  const CommonBody = (props) => {
    return <tbody {...props} />
  }

  const handleRefresh = (data) => {
    dispatch({
      type: 'customerDetail/queryAddress',
      payload: {
        customerId: data.customerId,
      },
    })
  }

  const modalProps = {
    visible: modalVisible,
    item: modalType === 'create' ? {customerId: item.customerId} : item,
    maskClosable: false,
    title: modalType === 'create' ? '添加收货地址' : '更新收货地址',
    wrapClassName: 'vertical-center-modal',
    width: 600,
    onOk (data) {
      dispatch({
        type: `customerDetail/${modalType === 'create' ? 'saveAddr' : 'updateAddr'}`,
        payload: data,
      }).then(() => {
        handleRefresh(data)
      })
    },
    onCancel () {
      dispatch({
        type: 'customerDetail/hideAddrModal',
      })
    },
  }

  const showModal = (type) => {
    dispatch({
      type: 'customerDetail/showAddrModal',
      payload: {
        addrModalType: type,
      },
    })
  }

  return (
    <Fragment>
      <Row gutter={24}>
        <Col span={24}>
          <Button onClick={() => showModal('create')} type="primary"
                  style={{marginBottom: 16, marginLeft: 12}}>新增地址</Button>
        </Col>
      </Row>
      <Row gutter={24}>
        <Col span={24}>
          <Table
            {...tableProps}
            className={classnames(styles.table, {[styles.motion]: isMotion})}
            columns={columns}
            simple
            rowKey={record => record.id}
            components={{
              body: {wrapper: isMotion ? AnimateBody : CommonBody},
            }}
          />
        </Col>
      </Row>
      {modalVisible && <AddressModal {...modalProps}/>}
    </Fragment>
  )
}

List.propTypes = {
  isMotion: PropTypes.bool,
  location: PropTypes.object,
}

export default List
